<template>
  <div>
    <h3>{{ temp }}</h3>
    <p>{{ user.name }}</p>
    <p>{{ user.age }}</p>
    <button @click="increase">click me!</button>
  </div>
</template>
<script>
// https://www.cnblogs.com/yingliyu/p/14267394.html
import { ref, reactive } from "vue";
export default {
  setup() {
    const temp = ref(0);
    temp.value = "hello";
    const user = reactive({ name: "lemon", age: 20 });
    console.log(temp);
    console.log(temp.value); // hello
    console.log(user); // Proxy {name:'lemon',age:20}

    const increase = () => {
      user.age++;
    };
    return { temp, user, increase };
  },
};
</script>
